import React from 'react';
import {Provider} from 'react-redux';
import * as Bootstrap from 'react-bootstrap';
import BaseStepContainer from './BaseStepContainer';

import * as action from "../actions/IntroductionContainerAction";
import {introductionContainerStore} from '../stores/IntroductionContainerStore';
import  './Introduction.less';

import * as  CommonUtil from '../util/CommonUtil';

import FormGroupComponent from "../components/general/FormGroupComponent";
import ECharts3Component from "../components/echarts3/ECharts3Component";
import TypewriterComponent from "../components/general/TypewriterComponent";

export default class IntroductionContainer extends BaseStepContainer {

    constructor(props) {
        super(props);
        this.state.stepName = "Introduction";
    };

    contentRender() {

        const {avatar, name, sex, degree, birthday, startWorkDate, location, phone, email, introduction} = this.state;

        let now = new Date().getTime();

        let age = CommonUtil.yearDiff(now - birthday);
        let workYear = CommonUtil.yearDiff(now - startWorkDate);

        let ageOption = {
            series: [{
                name: '年龄',
                type: 'gauge',
                min: 0,
                max: 100,
                data: [{value: age, name: '年龄'}]
            }]
        };

        let workYearOption = {
            series: [{
                name: '工作年限',
                type: 'gauge',
                min: 0,
                max: 40,
                data: [{value: workYear, name: '工作年限'}]
            }]
        };

        return (
            <Provider store={introductionContainerStore}>
                <Bootstrap.Row>
                    <Bootstrap.Col componentClass={Bootstrap.Panel} xs={8} xsOffset={2}>
                        <Bootstrap.Form horizontal>
                            <Bootstrap.Row>
                                <Bootstrap.Col xs={12}>
                                    <Bootstrap.Image src={avatar} circle className="avatar center-block"/>
                                </Bootstrap.Col>
                            </Bootstrap.Row>
                            <Bootstrap.Row>
                                <Bootstrap.Col xs={6}>
                                    <FormGroupComponent id="formGroupName" title="姓名" content={name}/>
                                </Bootstrap.Col>
                                <Bootstrap.Col xs={6}>
                                    <FormGroupComponent id="formGroupSex" title="性别" content={sex}/>
                                </Bootstrap.Col>
                            </Bootstrap.Row>
                            <Bootstrap.Row>
                                <Bootstrap.Col xs={6}>
                                    <FormGroupComponent id="formGroupDegree" title="学历" content={degree}/>
                                </Bootstrap.Col>
                                <Bootstrap.Col xs={6}>
                                    <FormGroupComponent id="formGroupLocation" title="所在地点" content={location}/>
                                </Bootstrap.Col>
                            </Bootstrap.Row>
                            <Bootstrap.Row>
                                <Bootstrap.Col xs={6}>
                                    <FormGroupComponent id="formGroupPhone" title="电话" content={phone}/>
                                </Bootstrap.Col>
                                <Bootstrap.Col xs={6}>
                                    <FormGroupComponent id="formGroupEmail" title="邮箱" content={email}/>
                                </Bootstrap.Col>
                            </Bootstrap.Row>
                            <Bootstrap.Row>
                                <Bootstrap.Col xs={6}>
                                    <ECharts3Component id="ageGauge" option={ageOption} height="300px"/>
                                </Bootstrap.Col>
                                <Bootstrap.Col xs={6}>
                                    <ECharts3Component id="workYearGauge" option={workYearOption} height="300px"/>
                                </Bootstrap.Col>
                            </Bootstrap.Row>
                            <Bootstrap.Row>
                                <Bootstrap.Col xs={12}>
                                    <TypewriterComponent id="introduction" content={introduction}
                                                         containerClassName="introductionTypewriter"/>
                                </Bootstrap.Col>
                            </Bootstrap.Row>
                        </Bootstrap.Form>
                    </Bootstrap.Col>
                </Bootstrap.Row>
            </Provider>
        );
    }

    componentWillMount() {
        const {self}= this.state;
        introductionContainerStore.subscribe(() => {
            const {introductionReducer} = introductionContainerStore.getState();
            self.reloadIntroduction(introductionReducer);
        });
        introductionContainerStore.dispatch(action.getIntroduction());
    }

    reloadIntroduction(introductionReducer) {
        if (introductionReducer.isChange) {
            introductionReducer.payload.then((data) => {
                const {code, result} = data;
                if (1 == code) {
                    const {avatar, name, sex, degree, birthday, startWorkDate, location, phone, email, introduction} =result;
                    this.setState({
                        avatar, name, sex, degree, birthday, startWorkDate, location, phone, email, introduction
                    });
                }
            });
        }
    }

}
